<template>
  <div>
    <el-dialog
      title="订单信息查询"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      width="80%"
      @close="close"
    >

      <div class="top">
        <el-input
          v-model="kwInput"
          placeholder="输入 任意字符 进行筛选"
          class="input-with-select"
          clearable
          @keyup.native.enter="handleGetOrders"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleGetOrders">搜索</el-button>
        </el-input>
      </div>
      <el-table
        v-loading="loading"
        :data="order_datas"
        border
        :row-style="tableRowStyle"
        :cell-style="tableCellStyle"
        :default-sort="{prop: 'order_time', order: 'descending'}"
        style="width: 100%;border:2px solid black;color:black"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column align="center" label="订单信息" width="250px">
          <template slot-scope="scope">
            {{ scope.row.reference }} {{ scope.row.id_order }} <i
              class="el-icon-refresh"
              @click="handleReFreshOrder(scope.row)"
            /><br>
            网站:
            <el-tag type="primary" @click="handleSingleStatics(scope.row.website_id)">{{ scope.row.domain }}</el-tag>
            <br>
            <span style="color:#FF0000;">
              <i class="el-icon-date">{{ scope.row.create_at.split('T')[0] }}</i>
              <i class="el-icon-time">{{ scope.row.create_at.split('T')[1] }}</i>
            </span>
            <br>
            <a target="_blank" href="#" title="发送邮件">{{ scope.row.email }}</a>
            <br>
            <el-button size="mini" type="default" @click="handleReFreshOrder(scope.row)">同步
            </el-button>
            <el-button
              size="mini"
              type="default"
              @click="handleHiddenOrder(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="地址信息" width="250px">
          <template slot-scope="scope">
            <span v-if="scope.row.id_transaction !== ''" style="color:#FF0000;">
              <strong>
                {{ scope.row.firstname }} {{ scope.row.lastname }}<br>
                <span v-if="scope.row.address2">{{ scope.row.address2 }}<br></span>
                {{ scope.row.address1 }}<br>
                {{ scope.row.country_statename }},{{ scope.row.city }},{{ scope.row.postcode }}<br>
                {{ scope.row.country }}<br>
                {{ scope.row.phone }}<br>
              </strong>
            </span>
            <span v-else>
              <el-alert
                title="也许是支付失败的订单,请核实"
                type="warning"
                :closable="false"
                show-icon
              />
            </span>
            <br>
            <span>系统ID:</span><span>{{ scope.row.id }}</span><br>
            <!--<el-button type="text" size="mini" @click="getAddressJs(scope.row)">获取地址代码</el-button>-->
          </template>
        </el-table-column>
        <el-table-column align="left" label="产品信息">
          <template slot-scope="scope">
            <span> {{ scope.row.currency }}{{ scope.row.total_paid }} 运费:<span style="color:#FF0000">{{ scope.row.currency }}{{ scope.row.total_shipping }}</span></span>
            <span>{{ scope.row.carrier }}</span>
            <el-table :data="scope.row.products" size="mini" border fit style="width: 100%;color:#075DB3;">
              <el-table-column
                align="center"
                width="65px"
                prop="image"
                label="图片"
                @click="handleShowProductDetail(scope.row)"
              >
                <template slot-scope="scope">
                  <img
                    :src="scope.row.image"
                    style="max-width: 50px; max-height: 50px"
                    @click="handleShowProductDetail(scope.row)"
                  >
                </template>
              </el-table-column>
              <el-table-column align="center" prop="product_name" label="产品">
                <template slot-scope="scope">
                  <a v-if="scope.row.ps_url" :href="scope.row.ps_url" target="_blank">{{ scope.row.product_name }}</a>
                  <span v-else>{{ scope.row.product_name }}</span>
                  <!--<a v-if="scope.row.product_url" :href="scope.row.product_url+'?erporderid='+scope.row.order_id" target="_blank"> 采购</a>-->
                  <!--<span v-else>{{scope.row.product_url}}</span>-->
                </template>
              </el-table-column>
              <el-table-column align="center" width="80px" prop="product_quantity" label="数量/ID">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="handleShowProductDetail(scope.row)">
                    {{ scope.row.product_quantity }}
                  </el-button>
                  <el-button type="text" size="mini" @click="handleShowFastModifyFeed(scope.row)">
                    {{ scope.row.product_id }}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" width="80px" prop="product_url" label="供应商">
                <template slot-scope="scope">
                  <!--<el-button type="text" size="mini" @click="handleShowGoogleConversion(scope.row)">{{scope.row.google_conversion_count}}-->
                  <!--</el-button>-->
                  <el-button type="text" size="mini" @click="handleShowSupplier(scope.row)">查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button
              v-if="scope.row.id_transaction === ''"
              icon="el-icon-search"
              size="mini"
              type="primary"
              @click="handleGetPayment(scope.row)"
            >获取交易号
            </el-button>
            <el-tag v-else size="medium" type="success">{{ scope.row.payment_name }} 账号:{{ scope.row.paypal_api_account }} 交易号: {{ scope.row.id_transaction }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="left" label="发货信息">
          <template slot-scope="scope">
            <ul v-for="item in scope.row.trackings" v-if="scope.row.trackings.length > 0" :key="item" style="padding-left: 0px;">
              <li v-if="item.dropshipping_account !== ''" style="list-style:none">采购账号:{{ item.dropshipping_account }}  快递:{{ item.carrier }}</li>
              <li v-if="item.dropshipping_order_id !== ''" style="list-style:none">
                订单ID:
                <a
                  target="_blank"
                  :href="'https://trade.aliexpress.com/order_detail.htm?&orderId='+item.dropshipping_order_id"
                >{{ item.dropshipping_order_id }}</a>
              </li>
              <li v-if="item.order_state !== ''" style="list-style:none">{{ item.order_state }}</li>
              <li v-if="item.tracking_no !== ''" style="list-style:none">
                跟踪单号:<span v-if="item.tracking_url !== ''"><a :href="'https://global.cainiao.com/detail.htm?mailNoList=' + scope.row.tracking_no" target="_blank">{{ item.tracking_no }}</a></span>
                <span v-else>{{ item.tracking_no }}</span></li>
              <li v-if="item.specify_tracking_no !== ''" style="list-style:none">
                指定跟踪单号:<span v-if="item.tracking_url !== ''"><a :href="'https://t.17track.net/en#nums=' + scope.row.specify_tracking_no" target="_blank">{{ item.specify_tracking_no }}</a></span>
                <span v-else>{{ item.specify_tracking_no }}</span>
              </li>
              <li v-if="item.tracking_no_duplicate" style="list-style:none"><el-tag type="danger">跟踪单号重复</el-tag></li>
              <li v-if="item.order_at !== ''" style="list-style:none">{{ item.order_at }}</li>
            </ul>
            <ul v-else style="padding-left: 0px;">
              <li v-if="scope.row.dropshipping_account !== ''" style="list-style:none">
                <a
                  target="_blank"
                  :href="'https://trade.aliexpress.com/order_detail.htm?&orderId='+scope.row.dropshipping_order_id"
                >{{ scope.row.dropshipping_account }}采购<br>订单ID:{{ scope.row.dropshipping_order_id }}</a>
              </li>
              <li v-if="scope.row.dropshipping_msg !== ''" style="list-style:none">{{ scope.row.dropshipping_msg }}</li>
              <li v-if="scope.row.tracking_no !== ''" style="list-style:none">
                跟踪单号:<span v-if="scope.row.tracking_url !== ''"><a :href="scope.row.tracking_url" target="_blank">{{ scope.row.tracking_no }}</a></span>
                <span v-else>{{ scope.row.tracking_no }}</span></li>
            </ul>
            <!--<el-tag type="warning" v-if="scope.row.note != ''" @click="addnote(scope.row)">{{scope.row.note}}</el-tag>-->
            <el-button v-if="scope.row.note != ''" type="danger" plain size="mini" @click="addnote(scope.row)">
              {{ scope.row.note }}
            </el-button>
            <el-button v-else type="text" size="mini" @click="addnote(scope.row)">添加备注</el-button>

            <el-button
              v-if="!scope.row.is_shipping"
              icon="el-icon-edit"
              size="mini"
              type="danger"
              @click="handleShipped(scope.row)"
            >
              发送货物
            </el-button>
            <el-button
              v-else-if="!scope.row.shipping_company_order_id"
              icon="el-icon-edit"
              size="mini"
              type="success"
              @click="handleShipped(scope.row)"
            >
              快递信息
            </el-button>

            <el-button v-else icon="el-icon-edit" size="mini" type="warning" @click="handleShipped(scope.row)">修改信息
            </el-button>
            <br>
            <hr>
            <el-select v-model="scope.row.state_value" size="medium" clearable>
              <el-option
                v-for="item in scope.row.states"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
            <el-button
              size="medium"
              type="primary"
              :loading="scope.row.loading"
              @click="handleChangeOrderState(scope.row)"
            >修改状态
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="order_datas.length"
        background
        class="mt-pagination"
        :current-page="page"
        :page-sizes="[10,50,100,200,300,500]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />

    </el-dialog>
    <shipping
      :psorder_id="psorder_id"
      :shipping-visiable="shippingVisiable"
      @closeMyDialog="shippingVisiable=false"
      @SetShippingSuccess="handleSetShippingSuccess"
    />
    <orderdetail
      :order-static-visible="orderdetailVisual"
      :product_url="product_url"
      :website_id="select_web"
      @closeMyDialog="orderdetailVisual=false"
    />
    <supplier
      :d-visible="supplierVisible"
      :original_url="original_url"
      :order_id="order_id"
      :image="product_image"
      @closeDialog="supplierVisible=false"
    />
    <feedfastmodify
      :domain="feedfastmodify_domain"
      :website_id="feedfastmodify_website_id"
      :product_id="feedfastmodify_product_id"
      :is-visual="feedFastModifyVisible"
      @closeMyDialog="feedFastModifyVisible=false"
    />
  </div>
</template>

<script>
import { Get as GetOrders, Put as ModifyOrder } from '@/api/orders/psorder'
import { Get as GetProjects } from '@/api/erp/elicink/project'
import { Get as GetWebsite } from '@/api/erp/elicink/website'
import { Post as AddOrderWeb, Get as GetOrderWebs } from '@/api/orders/psorderweb'
import { OrdersSyncState, OrdersGetPayment, OrdersSyncOrder } from '@/api/orders/ordersapi'
import { Get as GetOrderState } from '@/api/orders/psorderstate'
import Supplier from './supplier'
import Ordersweb from './ordersweb'
import Feedfastmodify from './feedfastmodify'
import orderdetail from '@/views/orders/element/orderdetail'

import qs from 'qs'
import { getToken, setToken } from '../orders'
import Shipping from './shipping'

const ProjectKey = 'orders_project_id'

export default {
  name: 'Orderinfo',
  components: {
    Shipping,
    Feedfastmodify,
    Ordersweb,
    Supplier,
    orderdetail
  },
  props: ['orderinfoVisible', 'keyword'],
  data() {
    return {
      dialogVisible: false,
      feedFastModifyVisible: false,
      feedfastmodify_domain: '',
      feedfastmodify_website_id: '',
      feedfastmodify_product_id: '',
      feedoptions: {},
      orderswebVisible: false,
      supplierVisible: false,
      original_url: '',
      product_image: '',
      order_id: '',
      sendgoogleconversionVisuable: false,
      product_id: '',
      product_url: '',
      orderdetailVisual: false,
      current_website_id: '',
      orderStaticVisible: false,
      aliexpressordersVisual: false,
      projects: [],
      project_id: null,
      projectsLoading: false,
      timerange: '',
      total_sales: 0,
      shippingsearchVisual: false,
      searchByPamentVisual: false,
      psorder_id: '',
      shippingVisiable: false,
      statesyncloading: false,
      headerStyle: "{color:'black'}",
      loading: false,
      select_web: '',
      selected_status: [],
      dataStatus: [],
      kwInput: '',
      order_by: 'order_time',
      order_desc: 1,
      // pagination
      pagesize: 10,
      page: 1,
      total: 0,
      websites: [],
      orderwebs: [],
      order_datas: [],
      common_dataStatus: [
        {
          id: 101,
          name: '新订单',
          value: 'neworder'
        },
        {
          id: 1,
          name: '状态1',
          value: 1
        },
        {
          id: 2,
          name: 'Payment accepted(2)',
          value: 2
        },
        {
          id: 3,
          name: 'Processing in progress(3)',
          value: 3
        },
        {
          id: 4,
          name: 'Shipped(4)',
          value: 4
        },
        {
          id: 5,
          name: 'Delivered(5)',
          value: 5
        },
        {
          id: 6,
          name: 'Canceled(6)',
          value: 6
        },
        {
          id: 7,
          name: 'Refunded(7)',
          value: 7
        },
        {
          id: 8,
          name: 'Payment error(8)',
          value: 8
        },
        {
          id: 9,
          name: 'On backorder (paid)(9)',
          value: 9
        },
        {
          id: 10,
          name: '10',
          value: 10
        },
        {
          id: 11,
          name: '11',
          value: 11
        },
        {
          id: 12,
          name: '12',
          value: 12
        },
        {
          id: 13,
          name: '13',
          value: 13
        },
        {
          id: 14,
          name: '14',
          value: 14
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime())
            start.setHours(0, 0, 0)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天下班后',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setHours(19, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '过去14天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近1年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  watch: {
    orderinfoVisible(v) {
      this.dialogVisible = v
    },
    keyword(v) {
      this.kwInput = v
      this.handleGetOrders()
    }
  },
  created() {
    this.project_id = getToken(ProjectKey)
    this.handleFetchProjects()
    this.handleGetWebsite()
  },
  methods: {
    handleShowSupplier(row) {
      this.original_url = row.product_url
      this.order_id = row.order_id
      this.product_image = row.image
      this.supplierVisible = true
    },
    handleShowOrderDetailAll() {
      this.product_url = ''
      this.orderdetailVisual = true
    },
    handleShowProductDetail(row) {
      this.product_url = row.product_url
      this.orderdetailVisual = true
    },
    handleShowFastModifyFeed(row) {
      if (row.product_id === '') {
        this.$message({
          type: 'info',
          message: '产品ID不能为空'
        })
        return
      }
      this.feedfastmodify_domain = row.domain
      this.feedfastmodify_website_id = row.website_id
      this.feedfastmodify_product_id = row.product_id
      console.log(this.feedfastmodify_domain, this.feedfastmodify_product_id)
      this.feedFastModifyVisible = true
    },
    handleShowGoogleConversion(row) {
      this.product_id = row.id
      this.sendgoogleconversionVisuable = true
    },
    handleFetchProjects() {
      this.projectsLoading = true
      GetProjects()
        .then(response => {
          this.projectsLoading = false
          this.projects = response.data.data
          if (this.projects.length) {
            this.project_id = getToken(ProjectKey) || null
          }
        })
        .catch(e => {
          this.projectsLoading = false
        })
    },
    tableRowStyle({ row, rowIndex }) {
      if (row.state_value === 8) {
        return 'background-color: pink;border-style: solid;'
      } else {
        return 'border-style: solid; border-width:5px;'
      }
    },
    tableCellStyle({ row, rowIndex }) {
      return 'border-right:1px solid #EBEEF5;border-bottom:2px solid #000'
    },
    handleSelectionChange(val) {
      this.total_sales = 0
      val.forEach((row) => {
        this.total_sales += row.total_paid
      })
    },
    handleHiddenOrder(row) {
      this.$confirm('是否删除此订单,不会再搜索结果中显示', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ModifyOrder(row.id, { 'show_able': false })
          .then(() => {
            this.delData(row.id)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleReFreshOrder(row) {
      OrdersSyncOrder(row.id).then(() => {
        this.$notify({
          title: '成功',
          message: '同步成功',
          type: 'success',
          duration: 1000
        }).catch(error => {
          this.$message({
            type: 'error',
            message: error
          })
        })
        this.handleGetOrders()
      })
    },
    handleGetOrderState() {
      GetOrderState(null, qs.stringify({ 'website_id': this.select_web }))
        .then(response => {
          this.dataStatus = response.data.data
          console.log(this.dataStatus)
        }).catch(error => {
          this.$message({
            type: 'error',
            message: error
          })
        })
    },
    handleShipped(row) {
      this.psorder_id = row.id
      this.shippingVisiable = true
    },
    handleSetShippingSuccess(data) {
      ModifyOrder(data.psorder_id, { 'is_shipping': true })
        .then(response => {
          this.$notify({
            title: '成功',
            message: '标记成功',
            type: 'success',
            duration: 1000
          })
        }).catch(error => {
          this.$message({
            type: 'error',
            message: error
          })
        })
    },
    delData(id) {
      this.order_datas.forEach((v, i) => {
        if (id === v.id) {
          console.log('delete row')
          this.order_datas.splice(i, 1)
        }
      })
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.handleGetOrders()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.handleGetOrders()
    },
    handleSyncOrderState() {
      this.statesyncloading = true
      OrdersSyncState(this.select_web).then(response => {
        this.handleGetOrderState()
        this.statesyncloading = false
      }).catch(error => {
        this.statesyncloading = false
        this.$message({
          type: 'error',
          message: error
        })
      })
    },
    handleStatics() {
      this.current_website_id = this.select_web
      this.orderStaticVisible = true
    },
    handleSingleStatics(website_id) {
      this.current_website_id = website_id
      this.orderStaticVisible = true
    },
    rowStyle({ row, rowIndex }) {
      if (row.is_shipping) {
        return 'background:#ffcc66;'
      } else {
        return ''
      }
    },
    handleGetWebsite() {
      GetWebsite(null, qs.stringify({ 'project_id': this.project_id })).then(response => {
        this.websites = response.data.data
      })
    },
    handleGetOrderWebs() {
      GetOrderWebs().then(response => {
        this.orderwebs = response.data.data
        console.log(this.orderwebs)
      })
    },
    handleChangeOrderState(row) {
      this.$confirm(`确认要修改订单状态吗？状态修改会同步到网站`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.loading = true
        ModifyOrder(row.id, { 'state_value': row.state_value })
          .then(response => {
            row.loading = false
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 1000
            })
            this.delData(row.id)
          })
      }).catch(() => {
      })
    },
    getAddressJs(row) {
      this.$alert(row.js, row.domain + '订单' + row.id_order + '地址代码', {
        confirmButtonText: '确定'
      })
      this.$copyText(row.js).then(response => {
        this.$notify({
          title: '成功',
          message: '订单' + row.id_order + '地址代码已经复制到了剪切板',
          type: 'success'
        })
      }).catch(() => {
        this.$notify({
          title: '提示',
          type: 'error',
          message: '地址代码复制成功'
        })
      })
    },
    addnote(row) {
      this.$prompt('添加备注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row.note
      }).then(({ value }) => {
        this.loading = true
        ModifyOrder(row.id, { 'note': value })
          .then(response => {
            this.loading = false
            row.note = value
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 1000
            })
          }).catch(error => {
            this.loading = false
            this.$message({
              type: 'error',
              message: error
            })
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    handleSyncOrders() {
      this.loading = true
      AddOrderWeb({ website_id: this.select_web }).then(response => {
        this.loading = false
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 1000
        })
      }).catch(error => {
        this.loading = false
        this.$message({
          type: 'error',
          message: error
        })
      })
    },
    handleGetPayment(row) {
      this.loading = true
      OrdersGetPayment(row.id).then(response => {
        this.loading = false
        row['id_transaction'] = response.data.id_transaction
        row['payment_name'] = response.data.payment_name
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 1000
        })
      }).catch(error => {
        this.loading = false
        this.$message({
          type: 'error',
          message: error
        })
      })
    },
    handleChangeProject() {
      setToken(ProjectKey, this.project_id)
      this.handleGetWebsite()
    },
    handleChangeWeb() {
      this.page = 1
      this.handleGetOrders()
      this.handleGetOrderState()
    },
    handleSearchByPayment() {
      this.searchByPamentVisual = true
    },
    handleSearchShipping() {
      this.shippingsearchVisual = true
    },
    handleAliexpressOrders() {
      this.aliexpressordersVisual = true
    },
    handleGetOrders() {
      this.loading = true
      if (this.kwInput !== '') {
        this.page = 1
      }
      GetOrders(null, qs.stringify({
        project_id: this.project_id,
        website_id: this.select_web,
        kw: this.kwInput,
        pagesize: this.pagesize,
        start: this.timerange ? this.timerange[0] : '',
        end: this.timerange ? this.timerange[1] : '',
        page: this.page,
        order_by: this.order_by,
        state: this.selected_status.join('-'),
        order_desc: this.order_desc
      })).then(response => {
        this.order_datas = response.data.data
        this.total_sales = 0
        setToken(ProjectKey, this.project_id)
        this.order_datas.forEach((row) => {
          this.total_sales += row.total_paid
        })
        this.loading = false
        this.total = response.data.total
      }).catch(error => {
        this.loading = false
        this.$message({
          type: 'error',
          message: error
        })
      })
    },
    close() {
      this.$emit('closeDialog', false)
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-select .el-input {
    width: 350px;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 30px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 68px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin-top: 60px;
    /*margin: 168px auto !important;*/
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 100px;
  }
</style>
